<template>
<div :class="[$style.container]">
  <el-input type="textarea" placeholder="请输入备注" v-model="remark" maxlength="50" show-word-limit></el-input>

  <div :class="[$style.footer]">
    <el-button type="primary" size="small" v-bind="getState('pass')" @click="onAudit('pass')">审批通过</el-button>
    <el-button type="warning" size="small" v-bind="getState('reject')"  @click="onAudit('reject')" v-if="!isFirstNode">审批驳回</el-button>
    <el-button type="danger" size="small" v-bind="getState('termination')"  @click="onAudit('termination')">审批拒绝</el-button>
  </div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'
import { auditTask } from '@/api/flow'

@Component
export default class AuditForm extends Vue {
  @Prop() data!: any

  @Prop() taskId!: string

  remark = ''

  submitting = false

  action = ''

  getState (action: string) {
    if (!this.submitting) return {}
    if (action === this.action) return { loading: true }
    return { disabled: true }
  }

  get isFirstNode () {
    return (this.data?.nodes || []).findIndex((v: any) => v.key === this.data?.currentNodeKey) === 0
  }

  onAudit (action: 'pass' | 'reject' | 'termination') {
    this.action = action
    this.submitting = true
    auditTask(this.taskId, { action, comment: this.remark, processInstanceId: this.data?.processInstanceId }).then(() => {
      this.$message.success('已提交')
      this.$root.$emit('sys_message', { type: 'todo_task_remind' })
      this.$router.go(-1)
    }).finally(() => {
      this.submitting = false
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
}

.footer {
  margin-top: 20px;
  text-align: center;
}
</style>
